Skip to content

fix(lucide-react): correct client directives in RSC files#4189

Merged
ericfennis merged 3 commits intolucide-icons:nextfrom
songkeys:fix/lucide-react-client-directives
Mar 23, 2026
Merged

fix(lucide-react): correct client directives in RSC files#4189
ericfennis merged 3 commits intolucide-icons:nextfrom
songkeys:fix/lucide-react-client-directives

Conversation

@songkeys
Copy link
Copy Markdown
Contributor

Description

Follow-up to #4175.

packages/lucide-react/src/Icon.ts and packages/lucide-react/src/context.ts currently use 'use-client'; instead of the valid React client directive 'use client';.

In Next.js / Turbopack, that typo means those modules are not treated as client-only. Because context.ts initializes createContext, importing Lucide icons from an App Router server component can still fail during server evaluation with TypeError: createContext is not a function.

This PR:

  • changes both source files to use the valid client directive
  • adds a small regression test so the directive typo does not slip back in

I verified this locally with:

  • pnpm --filter lucide-react test
  • pnpm --filter lucide-react build

After the build, packages/lucide-react/dist/esm/Icon.js and packages/lucide-react/dist/esm/context.js both emit "use client";.

This targets next because the Lucide React v1 work, including the context provider changes from #4175, lives on that branch.

Before Submitting

Copilot AI review requested due to automatic review settings March 23, 2026 10:28
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes an invalid React client directive typo in lucide-react source files so Next.js/Turbopack correctly treats them as client modules, preventing server-evaluation failures around createContext. It also adds a regression test to prevent the typo from reappearing.

Changes:

  • Replace the incorrect 'use-client'; directive with the valid 'use client'; directive in Icon.ts and context.ts.
  • Add a Vitest regression test that asserts the first line of those files contains the valid directive.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
packages/lucide-react/src/Icon.ts Fixes the React client directive so the icon module is treated as a client module in RSC environments.
packages/lucide-react/src/context.ts Fixes the React client directive so context creation isn’t evaluated in server/RSC runtime.
packages/lucide-react/tests/directives.spec.js Adds a regression test to ensure the client directive remains correct.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@ericfennis ericfennis merged commit a6e648a into lucide-icons:next Mar 23, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants